<template>
  <div class="sidebar-container">
    <el-menu 
      default-active="1"
      class="sidebar-menu"
      text-color="#666"   
      active-text-color="#409EFF"
      unique-opened
      :collapse="false"
    >
      <!-- 配置管理菜单 -->
      <el-sub-menu index="1">
        <template #title>
          <el-icon style="margin-right: 8px;">
            <DataBoard />
          </el-icon>
          <span>配置管理</span>
        </template>
        <!-- 角色管理菜单：绑定点击事件跳转路由 -->
        <el-menu-item 
          index="1-1" 
          @click="toRoleManage"
        >
          角色管理
        </el-menu-item>
      </el-sub-menu>

      <!-- 质量成本菜单 -->
      <el-sub-menu index="2">
        <template #title>
          <el-icon style="margin-right: 8px;">
            <Money />
          </el-icon>
          <span>质量成本</span>
        </template>
        <el-menu-item index="2-1">成本维护</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { DataBoard, Money } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router' // 导入路由钩子

const router = useRouter()

// 跳转到角色管理页面的方法
const toRoleManage = () => {
  router.push('/role-manage')
}
</script>

<style scoped>
.sidebar-container {
  width: 180px;  
  height: calc(100vh - 60px);  
  background-color: #f8f9fa;  
  border-right: 1px solid #e6e6e6;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;  
}

.sidebar-menu {
  width: 100%;
  height: 100%;
  border-right: none;  
}

.sidebar-menu .el-sub-menu__title:hover,
.sidebar-menu .el-menu-item:hover {
  background-color: #e9ecef !important;  
}
</style>